<template>
  <div class="searchTop">
    <!-- 头部 -->
    <div class="searchTopNav">
      <!-- 左箭头返回 -->
      <div class="back">
        <svg class="icon" aria-hidden="true" @click="$router.back()">
          <use xlink:href="#icon-zuojiantou-01"></use>
        </svg>
      </div>
      <!-- 输入框 -->
      <div class="right">
        <input type="text" v-model.trim="searchKeyword" :placeholder="placeholder" @keydown.enter="saveKeyWord" />
      </div>
      <!-- × 号 清空输入 -->
      <svg class="iconcha" aria-hidden="true" v-show="searchKeyword" @click="cleanSearch" style="position:absolute;top:0.4rem;right:0.62rem; fill:rgb(90, 90, 90); width:0.32rem;height:0.32rem;">
        <use xlink:href="#icon-chacha"></use>
      </svg>
    </div>
    <!-- 搜索历史 -->
    <!-- <div class="history" v-show="searchMusicList.length==0"> -->
    <div class="history">
      <div class="historyLeft">历史</div>
      <!-- 历史列表 -->
      <div class="historyRight">
        <div class="keywordItem" v-for="(item, i) in keywordList" :key="i" @click="hisrotySearch(item)">
          {{ item }}
        </div>
      </div>
      <!-- 清空历史图标 -->
        <svg aria-hidden="true"  @click="cleanHistory" style="fill: rgb(168, 168, 168); width:0.4rem; height: 0.4rem; position: absolute;top:1.35rem;right:0.3rem;">
          <use xlink:href="#icon-lajixiang"></use>
        </svg>
    </div>

    <!-- 搜索出来的歌曲列表 -->
      <div class="playlist" v-show="searchMusicList.length!==0">
      <!-- 头部区域 -->
      <div class="playlist-top">
        <!-- 左侧播放全部 -->
        <div class="left">
          <div class="text">
            <div class="title">单曲</div>
            <div class="num">(共{{searchMusicList.length}}首)</div>
          </div>
        </div>
          <!-- 右侧收藏 -->
        <div class="btn">
            ▷ 播放
        </div>
      </div> 
      <!-- 歌单列表 -->
      <div class="list">
        <div class="playItem" v-for="(item, index) in searchMusicList" :key="item.id">
          <div class="left">
            <!-- 左侧索引 -->
            <div class="index">{{ index + 1 }}</div>
            <!-- 歌曲 -->
            <div class="content" @click="playSearch(item, index)">
              <div class="title">{{ item.name }}</div>
              <div class="author">
                <!-- 演唱者 -->
                <span class="tag" v-for="a in item.artists.slice(0,3)" :key="a.id">
                  {{a.name}}
                </span>
                <!-- 专辑 -->
                <span class="name"> - {{ item.album.name }}</span>
              </div>
            </div>
          </div>
          <div class="right">
            <svg class="icon icon1 " aria-hidden="true" v-if="item.mvid">
              <use xlink:href="#icon-bofang"></use>
            </svg>
            <svg class="icon icon2" aria-hidden="true">
              <use xlink:href="#icon-gengduo1"></use>
            </svg>
          </div>
        </div>
      </div>
  </div>


  </div>
</template>



<script>
import { Dialog } from 'vant';
import { searchMusic } from '@/network/home.js'
export default {
  data() {
    return {
      placeholder: '请输入关键词',
      keywordList: [],     // 搜索关键词列表
      searchKeyword: '',   // 搜索关键词
      searchMusicList: [], // 搜索成功的歌曲列表
    }
  },
  methods: {
    //TODO 调用搜索歌曲的接口 ↓↓↓
    async search() {
      const {data:res} = await searchMusic(this.searchKeyword)
      if (res.code === 200) {
        this.searchMusicList = res.result.songs
      }
      // console.log(this.searchMusicList);

    },

    //TODO 保存搜索关键词到本地 ↓↓↓
    async saveKeyWord () {
      if ( this.searchKeyword === '') return 
      this.keywordList.push(this.searchKeyword)
      //! 去重作用（Set集合会删除重复项，再使用 Array.from()组成新数组）
      this.keywordList = Array.from(new Set(this.keywordList))
      // 只允许保留 10个历史关键词，会按最新的进行保存
      if (this.keywordList.length>10) {
        this.keywordList = this.keywordList.slice(this.keywordList.length-10, this.keywordList.length)
      }
      // 保存到本地
      localStorage.keywordList = JSON.stringify(this.keywordList)
      this.search()
    },

    //TODO 清空历史 ↓↓↓
    async cleanHistory () {
      try {
        await Dialog.confirm({
          message: '确定清空全部历史记录？',
        })
        localStorage.removeItem('keywordList')
        this.keywordList = []
      } catch(err) {
        console.log(err);
      }
    },

    //TODO 点击历史标签，进行搜索 ↓↓↓
    hisrotySearch(keyword) {
      this.searchKeyword = keyword
      this.search()
    },

    //TODO 点击叉号，清除输入框内容和歌曲列表 ↓↓↓
    cleanSearch() {
      this.searchKeyword=''
      this.searchMusicList=[]
    },
    
    //TODO 点击播放
    playSearch(item, index) {
      item.al = item.album
      this.$store.commit('pushPlaylist', item)
      this.$store.commit('playCurrentIndex', this.$store.state.playlist.length-1)
      // console.log(this.$store.state.playlist);

    }

  },

  // 在模板渲染前加载
  beforeMount() {
    this.keywordList = localStorage.keywordList ? JSON.parse(localStorage.keywordList) : []

  }
}
</script>

<style lang="less" scoped>
body {
  background-color:#ccc;
}
.searchTop {
  width: 7.5rem;
  padding: 0 0.4rem;

  .searchTopNav {
    display: flex;
    width: 100%;
    height: 1.2rem;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    // padding: 0.35rem;
    padding: 0 0.3rem 0 0.3rem;
    .icon {
      width: 0.4rem;
      height: 0.4rem;
    }
    .right {
      flex: 1;
      padding: 0 0 0 0.3rem;
      input {
        border: none;
        outline: none;
        border-bottom: 1px solid rgb(161, 159, 159);
        width: 6rem;
        height: 0.7rem;
        background: none
      }
    }
  }
  .history {
    display: flex;
    margin-top:1.3rem;
    .historyLeft {
      width: 0.8rem;
      height: 0.5rem;
      font-weight: 900;
      margin: 0.1rem 0;
      line-height: 0.4rem;
    }
    .historyRight {
      color: #666;
      display: flex;
      flex-wrap: wrap;
      // flex: 1;
      width: 5.8rem;
      .keywordItem {
        background-color: rgb(240, 240, 240);
        height: 0.5rem;
        padding: 0 0.2rem;
        border-radius: 0.4rem;
        line-height: 0.5rem;
        margin: 0.1rem 0.1rem;
        font-size: 0.1rem;
      }
    }
  }

.playlist {
  // margin-top: 0.2rem;
  // background-color: #fff;
  // border-top-left-radius: 0.3rem;
  // border-top-right-radius: 0.3rem;

  margin-top: 0.2rem;
  background-color: #fff;
  border-top-left-radius: 0.3rem;
  padding: 0 0.1rem 0 0.35rem;
  border-top-right-radius: 0.3rem;
  width: 7.1rem;
  position: absolute;
  left: 0.19rem;
  position: fixed;
  top: 1rem;
  bottom: 1.2rem;
  overflow: scroll;
  .playlist-top {
    display: flex;
    justify-content: space-between;
    height: 1rem;
    align-items: center;
    border-bottom: 1px solid rgb(241, 241, 241);
    .left {
      display: flex;
      align-items: center;
      .text {
        display: flex;
        align-items: center;
      }
      .icon {
        width: 0.4rem;
        height: 0.4rem;
      }
      .title {
        font-size: 0.35rem;
        font-weight: 700;

      }
      .num {
        font-size: 0.2rem;
        color: rgb(146, 146, 146);
      }
    }
    .btn {
      font-size: 0.2rem;
      color: #fff;
      background-color: red;
      height: 0.5rem;
      line-height: 0.5rem;
      padding: 0 0.2rem;
      border-radius: 0.6rem;
      margin-right: 0.1rem;
    }
  }
  .list {
    .playItem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 1.2rem;
      border-bottom: 1px solid rgb(241, 241, 241);

      .left {
        display: flex;
        align-items: center;
        color: #666;
        .index {
          width: 0.2rem;
          text-align: center;
        }
        .content {
          margin-left: 0.4rem;
        }
        .title {
          font-size: 0.28rem;
          // font-weight: 700;
          color: #000;
          margin-bottom: 0.06rem;
        }
        .tag {
          margin-right: 0.1rem;
          font-size: 0.2rem;
          color: #ff4500;
          border: 0.1px solid #ff4500;
          border-radius: 0.1rem;
          padding:0 0.03rem;
        }
        .name {
          color: #666;
          font-size: 0.26rem;
        }
      }
      .right {
        .icon1 {
          margin-right: 0.33rem;
        }
        .icon2 {
          margin-right: 0.1rem;
        }
      }
    }
  }
}

}
</style>